<template>
  <view class="task-list">
    <Navbar :hideBtn="true" title="我的任务" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar>
    <view class="stick-top">
      <view style="padding: 20rpx 20rpx 0rpx 20rpx ;">
        <u-search placeholder="请输入店铺名称/关键词搜索" v-model="params.keyword" @search="search"></u-search>
      </view>
      <view style="padding-bottom: 20rpx;">
        <u-tabs :current="current" :list="tabs" :scrollable="false" lineColor="#f9343c" @change="onChangeTabs"></u-tabs>
      </view>
      <Gap></Gap>
    </view>
    <u-list @scrolltolower="loadMore" lowerThreshold="50" height="calc(100vh - var(--window-bottom) - var(--window-top) - 232rpx)">
      <TaskItem :data="o"  v-for="(o, i) in list" :key="i"></TaskItem>
    </u-list>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import Gap from '@/components/gap/Gap'
import TaskItem from './components/task-item.vue'
import { globalData } from '@/config/global-data'
import { mixinList } from '@/mixins/mixin-list'
import { getTaskList } from '@/api/order'

export default {
  components: {
    Gap,
    Navbar,
    TaskItem
  },
  data() {
    return {
      currentStatus: -1,
      params: {
        keyword: undefined
      },
      tabs: [
        { name: '全部', value: -1 },
        { name: '待支付', value: 2 },
        { name: '已完成', value: 3 },
        { name: '待评价', value: 4 },
        { name: '已评价', value: 5 }
      ]
    }
  },
  mixins: [mixinList({
    getParams(params) {
      return { ...params, customerAccount: this.$store.state.userInfo?.userName, status: this.currentStatus != -1 ? this.currentStatus : undefined }
    },
    getList(params) {
      return getTaskList(params)
    }
  })],
  computed: {
    current: {
      get() {
        return this.tabs.findIndex(o => o.value === this.currentStatus)
      },
      set(i) {
        const o = this.tabs[i]
        if (o) this.currentStatus = o.value
      }
    }
  },
  onShow(e) {
    console.log('onShow', globalData);
    if (globalData.taskListStatus !== undefined && globalData.taskListStatus !== this.currentStatus) {
      this.currentStatus = globalData.taskListStatus
      this.$nextTick(this.search)
    }
  },
  methods: {
    onChangeTabs(i, o) {
      this.current = i
      this.search()
    }
  },
}
</script>

<style lang="scss" scoped>
.task-list {
  &__main {
    flex: 1;
  }

  .stick-top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }
}
</style>